<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SCOR模型供应链驾驶舱 - 演示页面</title>
  <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
  <style>
    .demo-section {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .feature-card {
      transition: all 0.3s ease;
      border: 2px solid transparent;
    }
    
    .feature-card:hover {
      transform: translateY(-5px);
      border-color: #667eea;
      box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    }
    
    .scor-process {
      position: relative;
      overflow: hidden;
    }
    
    .scor-process::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
      transition: left 0.5s;
    }
    
    .scor-process:hover::before {
      left: 100%;
    }
  </style>
</head>
<body class="bg-gray-50">
  <!-- 导航栏 -->
  <nav class="bg-white shadow-sm">
    <div class="container mx-auto px-4 py-4">
      <div class="flex justify-between items-center">
        <div class="flex items-center space-x-4">
          <i class="fas fa-chart-line text-2xl text-blue-600"></i>
          <h1 class="text-xl font-bold text-gray-800">SCOR供应链驾驶舱</h1>
        </div>
        <div class="flex space-x-4">
          <a href="index3.html" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors">
            <i class="fas fa-play mr-2"></i>启动驾驶舱
          </a>
          <a href="README.md" class="text-gray-600 hover:text-blue-600 transition-colors">
            <i class="fas fa-book mr-2"></i>文档
          </a>
        </div>
      </div>
    </div>
  </nav>

  <!-- 主演示区域 -->
  <div class="demo-section">
    <div class="container mx-auto px-4">
      <div class="text-center text-white mb-12">
        <h1 class="text-5xl font-bold mb-4">SCOR模型供应链驾驶舱</h1>
        <p class="text-xl opacity-90">基于计划-采购-生产-交付-退货全流程的智能监控平台</p>
      </div>
      
      <!-- 功能特性展示 -->
      <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
        <div class="feature-card bg-white rounded-xl p-6 text-center">
          <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
            <i class="fas fa-eye text-2xl text-blue-600"></i>
          </div>
          <h3 class="text-xl font-bold text-gray-800 mb-2">实时监控</h3>
          <p class="text-gray-600">实时监控供应链各环节KPI指标，及时发现异常情况</p>
        </div>
        
        <div class="feature-card bg-white rounded-xl p-6 text-center">
          <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
            <i class="fas fa-chart-bar text-2xl text-green-600"></i>
          </div>
          <h3 class="text-xl font-bold text-gray-800 mb-2">多维度分析</h3>
          <p class="text-gray-600">支持时间、产品、地域、供应商等多维度数据分析</p>
        </div>
        
        <div class="feature-card bg-white rounded-xl p-6 text-center">
          <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
            <i class="fas fa-lightbulb text-2xl text-purple-600"></i>
          </div>
          <h3 class="text-xl font-bold text-gray-800 mb-2">智能建议</h3>
          <p class="text-gray-600">基于历史数据提供优化建议和改进方向指导</p>
        </div>
      </div>
      
      <!-- SCOR流程展示 -->
      <div class="grid grid-cols-1 md:grid-cols-5 gap-4 mb-12">
        <div class="scor-process bg-white rounded-lg p-4 text-center cursor-pointer">
          <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-2">
            <i class="fas fa-project-diagram text-blue-600"></i>
          </div>
          <h4 class="font-bold text-gray-800">计划</h4>
          <p class="text-sm text-gray-600">需求预测与计划</p>
        </div>
        
        <div class="scor-process bg-white rounded-lg p-4 text-center cursor-pointer">
          <div class="w-12 h-12 bg-cyan-100 rounded-full flex items-center justify-center mx-auto mb-2">
            <i class="fas fa-shopping-cart text-cyan-600"></i>
          </div>
          <h4 class="font-bold text-gray-800">采购</h4>
          <p class="text-sm text-gray-600">供应商管理</p>
        </div>
        
        <div class="scor-process bg-white rounded-lg p-4 text-center cursor-pointer">
          <div class="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-2">
            <i class="fas fa-industry text-orange-600"></i>
          </div>
          <h4 class="font-bold text-gray-800">生产</h4>
          <p class="text-sm text-gray-600">产能利用优化</p>
        </div>
        
        <div class="scor-process bg-white rounded-lg p-4 text-center cursor-pointer">
          <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-2">
            <i class="fas fa-truck text-green-600"></i>
          </div>
          <h4 class="font-bold text-gray-800">交付</h4>
          <p class="text-sm text-gray-600">物流配送管理</p>
        </div>
        
        <div class="scor-process bg-white rounded-lg p-4 text-center cursor-pointer">
          <div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-2">
            <i class="fas fa-undo-alt text-red-600"></i>
          </div>
          <h4 class="font-bold text-gray-800">退货</h4>
          <p class="text-sm text-gray-600">逆向物流处理</p>
        </div>
      </div>
      
      <!-- 启动按钮 -->
      <div class="text-center">
        <a href="index3.html" class="inline-flex items-center bg-white text-blue-600 px-8 py-4 rounded-xl text-lg font-bold hover:bg-gray-50 transition-colors shadow-lg">
          <i class="fas fa-rocket mr-3"></i>
          立即体验驾驶舱
        </a>
      </div>
    </div>
  </div>

  <!-- 功能介绍 -->
  <div class="bg-white py-16">
    <div class="container mx-auto px-4">
      <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">核心功能</h2>
      
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
        <!-- 左侧功能 -->
        <div class="space-y-8">
          <div class="flex items-start space-x-4">
            <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0">
              <i class="fas fa-chart-line text-blue-600"></i>
            </div>
            <div>
              <h3 class="text-xl font-bold text-gray-800 mb-2">需求预测分析</h3>
              <p class="text-gray-600">通过多种预测算法分析需求趋势，提供预测准确率评估和误差分布分析，帮助优化库存策略。</p>
            </div>
          </div>
          
          <div class="flex items-start space-x-4">
            <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center flex-shrink-0">
              <i class="fas fa-cubes text-purple-600"></i>
            </div>
            <div>
              <h3 class="text-xl font-bold text-gray-800 mb-2">库存管理优化</h3>
              <p class="text-gray-600">监控库存周转率、库存构成和健康度，识别滞销和超期库存，提供库存优化建议。</p>
            </div>
          </div>
          
          <div class="flex items-start space-x-4">
            <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center flex-shrink-0">
              <i class="fas fa-truck text-green-600"></i>
            </div>
            <div>
              <h3 class="text-xl font-bold text-gray-800 mb-2">供应商绩效管理</h3>
              <p class="text-gray-600">评估供应商质量合格率和准时交货率，支持多维度供应商分析，优化供应商选择策略。</p>
            </div>
          </div>
        </div>
        
        <!-- 右侧功能 -->
        <div class="space-y-8">
          <div class="flex items-start space-x-4">
            <div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center flex-shrink-0">
              <i class="fas fa-industry text-orange-600"></i>
            </div>
            <div>
              <h3 class="text-xl font-bold text-gray-800 mb-2">产能利用率监控</h3>
              <p class="text-gray-600">实时监控生产产能利用率，分析各工厂生产表现，识别产能瓶颈和优化机会。</p>
            </div>
          </div>
          
          <div class="flex items-start space-x-4">
            <div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center flex-shrink-0">
              <i class="fas fa-undo-alt text-red-600"></i>
            </div>
            <div>
              <h3 class="text-xl font-bold text-gray-800 mb-2">退货流程管理</h3>
              <p class="text-gray-600">跟踪退货处理周期，分析退货原因分布，优化逆向物流流程，提升客户满意度。</p>
            </div>
          </div>
          
          <div class="flex items-start space-x-4">
            <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center flex-shrink-0">
              <i class="fas fa-search text-indigo-600"></i>
            </div>
            <div>
              <h3 class="text-xl font-bold text-gray-800 mb-2">穿透查询分析</h3>
              <p class="text-gray-600">支持从宏观指标到微观数据的穿透查询，提供详细的趋势分析和改进建议。</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 技术特点 -->
  <div class="bg-gray-50 py-16">
    <div class="container mx-auto px-4">
      <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">技术特点</h2>
      
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
        <div class="text-center">
          <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
            <i class="fas fa-mobile-alt text-2xl text-blue-600"></i>
          </div>
          <h3 class="text-lg font-bold text-gray-800 mb-2">响应式设计</h3>
          <p class="text-gray-600">支持PC、平板、手机等多种设备访问</p>
        </div>
        
        <div class="text-center">
          <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
            <i class="fas fa-bolt text-2xl text-green-600"></i>
          </div>
          <h3 class="text-lg font-bold text-gray-800 mb-2">高性能</h3>
          <p class="text-gray-600">采用现代Web技术，确保流畅的用户体验</p>
        </div>
        
        <div class="text-center">
          <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
            <i class="fas fa-palette text-2xl text-purple-600"></i>
          </div>
          <h3 class="text-lg font-bold text-gray-800 mb-2">美观界面</h3>
          <p class="text-gray-600">现代化UI设计，直观的数据可视化</p>
        </div>
        
        <div class="text-center">
          <div class="w-16 h-16 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-4">
            <i class="fas fa-code text-2xl text-orange-600"></i>
          </div>
          <h3 class="text-lg font-bold text-gray-800 mb-2">易于扩展</h3>
          <p class="text-gray-600">模块化设计，便于功能扩展和定制</p>
        </div>
      </div>
    </div>
  </div>

  <!-- 页脚 -->
  <footer class="bg-gray-800 text-white py-8">
    <div class="container mx-auto px-4 text-center">
      <p class="mb-4">SCOR模型供应链驾驶舱 - 基于现代Web技术的智能监控平台</p>
      <div class="flex justify-center space-x-6 text-sm">
        <a href="README.md" class="hover:text-blue-400 transition-colors">
          <i class="fas fa-book mr-1"></i>文档
        </a>
        <a href="index3.html" class="hover:text-blue-400 transition-colors">
          <i class="fas fa-play mr-1"></i>启动
        </a>
        <span class="text-gray-400">
          <i class="fas fa-code mr-1"></i>MIT License
        </span>
      </div>
    </div>
  </footer>

  <script>
    // 添加一些交互效果
    document.addEventListener('DOMContentLoaded', function() {
      // SCOR流程卡片点击效果
      document.querySelectorAll('.scor-process').forEach(card => {
        card.addEventListener('click', function() {
          // 添加点击动画
          this.style.transform = 'scale(0.95)';
          setTimeout(() => {
            this.style.transform = 'scale(1)';
          }, 150);
        });
      });
      
      // 平滑滚动
      document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
          e.preventDefault();
          const target = document.querySelector(this.getAttribute('href'));
          if (target) {
            target.scrollIntoView({
              behavior: 'smooth'
            });
          }
        });
      });
    });
  </script>
</body>
</html> 